<template>
  <div>
    <!-- 搜索 -->
    <div class="one">
      <el-row type="flex">
        <el-col class="ico">
          <i class="el-icon-office-building"></i> 地产分类
        </el-col>
        <el-col :span="6" class="seach">
          <el-row type="flex" justify="end">
            <el-input
              v-model="pageConsige.title_contains"
              placeholder="请输入房产类型"
            />
            <el-button size="small" icon="el-icon-search" @click="searchBtn" />
          </el-row>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%" class="table">
        <el-table-column
          prop="image"
          label="房产图片"
          width="220px"
          align="center"
        >
          <template #default="{ row }">
            <img :src="row.image" alt="" style="height: 180px" />
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="房产类型"
          width="300"
          align="center"
        />
        <el-table-column
          prop="desc"
          label="房产介绍"
          width="500"
          align="center"
        />
        <el-table-column label="详情" align="center">
          <template #default="{ row }">
            <el-button
              type="success"
              plain
              @click="getPropertyList(row.id, row.title)"
            >
              查看所有的{{ row.title }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row style="text-align: center">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageConsige._limit"
          :total="total"
          @current-change="currentChange"
        />
      </el-row>
    </div>
  </div>
</template>

<script>
import { getCategories, CategoryCount } from "../../api/house";
export default {
  data() {
    return {
      tableData: [],
      pageConsige: {
        _limit: 2,
        _start: 0,
        title_contains: "",
      },
      total: 0,
    };
  },
  async created() {
    this.getCategories();
    this.CategoryCount();
  },
  methods: {
    //获取全部数据
    async getCategories() {
      const { data } = await getCategories(this.pageConsige);
      console.log(80, data);
      this.tableData = data;
    },
    // 翻页
    currentChange(newPage) {
      this.pageConsige._start = this.pageConsige._limit * (newPage - 1);
      this.getCategories();
    },
    // 显示分页 获取总页数
    async CategoryCount() {
      const { data } = await CategoryCount(this.pageConsige);
      console.log(data);
      this.total = data;
    },
    //搜索按钮 绑定input 再获取
    searchBtn() {
      //拿到input v-model 重新渲染
      this.getCategories();
      //重新渲染页数
      this.CategoryCount();
    },

    //筛选分类id跳转相关地产
    getPropertyList(id, title) {
      this.$router.push({
        path: "/pronperty",
        query: { cotegoryId: id, titleName: title },
      });
    },
  },
};
</script>

<style scoped>
.header {
  margin-bottom: 25px;
  border-bottom: 1px solid #dcdfe6;
}
.searchinp {
  margin-bottom: 20px;
}
.search {
  background-color: #f5f7fa;
  color: #ccc;
  border-color: #ccc;
}
.pageborder {
  height: 60px;
  margin-top: 30px;
  border-top: 2px solid #dcdfe6;
}
.operation {
  margin-top: 20px;
}
.seach {
  margin-bottom: 30px;
}
.one {
  width: 83%;
  margin: 30px auto;
}
.ico {
  font-size: 25px;
  color: rgb(238, 177, 8);
  font-weight: 700;
}
img {
  /* 进行图片裁切 */
  object-fit: cover;
}
</style>